<template>
	<view class="container">
		<view class="type">已选择投诉类型: <text style="font-size: 14px;">{{ type }}</text></view>
		<view class="center">
			<view class="tips">
				<uni-section title="请选择类别" type="line" sub-title="【如何获取?】">
					<view class="tips-item">
						<view class="demo-uni-row">
							<view v-for="(item, index) in choose" :key="index"
								:class="[`demo-uni-col`, index === active ? `active` : ``]"
								@click="addClass(index, $event)" :data-text="item">{{ item }}
							</view>
						</view>
					</view>
				</uni-section>
				<view>
					<van-cell-group>
						<van-field rows="1" type="textarea" :maxlength="25" :placeholder="placeholder" show-word-limit
							@input="getValue()" />
					</van-cell-group>
				</view>
			</view>
			<view class="detail">
				<uni-section title="详细说明" type="line">
					<van-cell-group>
						<van-field rows="5" type="textarea" :maxlength="500" autosize="{maxHeight: 100}"
							placeholder="请输入详细情况说明" show-word-limit @input="getDetailMsg()" />
					</van-cell-group>
				</uni-section>
			</view>
			<uni-section title="选择上传凭证" type="line">
				<view>
					<uni-file-picker v-model="imageValue" file-mediatype="image" mode="grid" file-extname="png,jpg"
						title="最多选择9张图片" @progress="progress" @success="success" @fail="fail" @delete="removeImg"
						@select="select()" />
				</view>
			</uni-section>
			<view style="margin: 3vh auto;">
				<button class="btn">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				active: 0,
				value: '',
				detailMsg: '',
				placeholder: '请填写投诉的商品名称',
				choose: ['商品名称', '商家名称', '订单编号'],
				imageValue: [],
				timer: null /* 节流*/
			}
		},
		onLoad(options) {
			this.type = options.type
		},
		methods: {
			addClass(index, e, item) {
				this.active = index
				this.placeholder = this.placeholder.slice(0, 6) + e.currentTarget.dataset.text;
			},
			getValue(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.value = e.detail
					if (this.value.length === 25) {
						uni.$showMsg('不得多于25个字')
					}
				}, 500)
			},
			getDetailMsg(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.detailMsg = e.detail
					if (this.detailMsg.length === 500) {
						uni.$showMsg('不得多于500个字')
					}
				}, 500)
			},
			success() {
				console.log(this.imageValue)
			},
			async select(e) { //选择图片
				uni.$showMsg('上传成功')
				await this.uploadImg(e.tempFilePaths, 1);
				console.log(e.tempFilePaths)
			},
			uploadImg(tempFilePaths, token) { //图片存放到图片数组，并发送请求至服务器
				if (!tempFilePaths.length) return;
				const path = tempFilePaths.pop();
				this.imageValue.push({
					url: path,
					name: ''
				})
				console.log(this.imageValue)
				/* 发送请求 */
			},
			removeImg(e) { //删除图片
				const num = this.imageValue.findIndex(item => {
					item.url === e.tempFilePath
				})
				this.imageValue.splice(num, 1)
				console.log(this.imageValue)
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
	}

	.type {
		text-align: justify;
		padding: 20rpx;

		background-color: #eee;
	}

	.center {
		background-color: #fff;
		padding: 0 20rpx;
	}

	.choose {
		margin-top: 30rpx;
	}

	.demo-uni-row {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		font-size: 13px;
	}

	.demo-uni-col {
		padding: 10rpx 40rpx;
		text-align: center;
		color: #e5e5e5;
		border: 1px solid #e5e5e5;
		border-radius: 10rpx;
	}

	.active {
		background-color: red;
		border: 1px solid red;
		color: #fff;
	}

	.btn {
		width: 100%;
		color: #fff;
		background-color: red;
		border-radius: 40rpx;
	}
</style>